<template>
	<div>
		<div class="m-b-20 ovf-hd">
			<div>
				<h4>红包积分设置</h4>
				<label>抽取一次所需积分：</label>
				<el-input v-model="integration" placeholder="请输入积分数"></el-input>
				<el-button type="primary" icon="document" @click="IntegrationSet">修改</el-button>
			</div>
		</div>
		<h4>等级设置</h4>
		<!-- 内容 -->
		<transition name="fade" mode="out-in" appear>
			<table-model v-loading="showLoading" :Edit="Edit" :tableData="data.received.table" :config="config.table" :exchanged="data.exchanged" :baseApi="config.baseApi"></table-model>
		</transition>

		<!-- 底部 -->
		<div class="pos-rel p-t-20">
			<div class="fl">
				<el-button type="primary" icon="document" @click="AddItems" v-if="!Add.disabled">新增</el-button>
			</div>
		</div>
		<!-- 新增 -->
		<el-dialog :title="Add.config.title" :visible.sync="Add.dialogFormVisible">
			<el-form ref="form" :model="Add.data.form" :rules="Add.config.rules" label-width="130px">

				<!-- 普通输入类型 -->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.input">
					<el-input v-model.trim="Add.data.form[item.prop]" class="h-40 w-200" :maxlength="255" :placeholder="item.placeholder"></el-input>
				</el-form-item>

				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.select">
					<el-select v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.multipleSelect">
					<el-select v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200" multiple>
						<el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<!--可抽取金额取值范围-->
				<el-form-item label="可抽取金额1">
					<el-col :span="24">
						<el-input v-model="Add.data.form.money_xia" class="h-40 w-200" placeholder="例如1,3"></el-input>
					</el-col>
					<el-col :span="24">
						<label for="">抽取到概率设置(%)：</label>
						<el-slider v-model="Add.data.form.low_percent"></el-slider>
					</el-col>
				</el-form-item>
				<el-form-item label="可抽取金额2">
					<el-col :span="24">
						<el-input v-model="Add.data.form.money_shang" class="h-40 w-200" placeholder="例如3,6"></el-input>
					</el-col>
					<!--<el-col :span="24">
						<label for="">抽取到概率设置：</label>
						<el-slider v-model="100 - Add.data.form.low_percent"></el-slider>
					</el-col>-->
				</el-form-item>

				<!-- 图片上传 -->
				<el-form-item :label="this.Add.config.form.uploadImg.label" v-if="this.Add.config.form.uploadImg.label">
					<el-upload name='files[0]' class="avatar-uploader" :action="Add.config.uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="Add.data.form[this.Add.config.form.uploadImg.prop]" :src="Add.data.form[this.Add.config.form.uploadImg.prop]" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="Add.dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="commitAdd">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import http from 'assets/js/http.js'
	import tableModel from 'components/Common/table-modelUp.vue'

	export default {
		components: {
			tableModel,
		},
		data() {
			return {
				integration: '',
				upLoadData: {
					cpyId: '123456', 
        			occurTime: '2017-08'
				},
				Add: {
					baseApi: '/AdminApi/userList/IntegralAdd',
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							name: null,
							scope: null,
							class: null,
							image: null,
							money_xia: '',
							money_shang: '',
							low_percent: 50,
						},
						selectData: []
					},
					config: {
//						uploadUrl: axios.defaults.baseUR + '/index/index/uploads',
						uploadUrl: 'http://www.tp51.com/index/index/uploads',
						domain: 'http://www.tp51.com/',
						title: '新增1',
						form: {
							input: [{
									prop: 'name',
									label: '等级名称',
									placeholder: '等级名称',
								},
								{
									prop: 'scope',
									label: '积分条件',
									placeholder: '0,100',
								},
								{
									prop: 'class',
									label: '等级序列',
									placeholder: '1,2,3···',
								},
								
							],
							select: [],
							uploadImg: {
								prop: 'image',
								label: '等级图片'
							}
						},
						rules: {
							Remark: [{
								required: true,
								message: '请输入账户变动详情 备注'
							}]
						}
					}
				},
				Edit: {
					classSet: true,
					baseApi: '/AdminApi/userList/Integral',
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							image: null,
							money_xia: '',
							low_percent: 50,
							money_shang: '',
						},
						selectData: []
					},
					config: {
//						uploadUrl: axios.defaults.baseURL + '/index/index/uploads',
						uploadUrl: 'http://www.tp51.com/index/index/uploads',
						domain: 'http://www.tp51.com/',
						title: '编辑等级信息',
						form: {
							input: [{
									prop: 'name',
									label: '等级名称'
								},
								{
									prop: 'scope',
									label: '条件'
								},
								{
									prop: 'class',
									label: '等级序列',
									placeholder: '1,2,3···',
								}
							],
							select: [],
							uploadImg: {
								prop: 'image',
								label: '等级图片',
							}
						},
						rules: {

						}
					}
				},
				config: {
					baseApi: 'AdminApi/userList/Integral_list',
					table: {
						domain: axios.defaults.baseURL,
						noGroup: false,
						checkbox: false,
						status: false,
						image: true,
						sort: {},
						show: {
							prop: [
								'class',
								'name',
								'scopeText',
							],
							items: [
								'等级序列',
								'等级名称',
								'条件',
							],
							width: []
						},

						operate: {
							edit: true,
						}
					},
				},
				data: {
					received: {
						table: [],
						count: null,
						search: {
							Enabled: [{
									label: '可用',
									value: '1'
								},
								{
									label: '冻结',
									value: '0'
								}
							]
						}
					},
					exchanged: {
						search: {
							limit: 10,
							page: 1,
							orderByString: ''
						},
						multipleSelection: [],
						isDelete: 0
					}
				}
			}
		},
		created() {
			this.init()
			// 延迟绑定监听
			this.$watch('data.exchanged.search', {
				deep: true,
				handler: function() {
					router.push({
						path: this.$route.path,
						query: this.getCondition()
					})
					_g.openGlobalLoading()
					this.tableData()
				}
			})
			this.$watch('data.exchanged.isDelete', {
				deep: true,
				handler: function() {
					_g.openGlobalLoading()
					this.tableData()
				}
			})
		},
		methods: {
			AddItems() {
				this.Add.dialogFormVisible = true // 显示窗体
			},
			init() {
				// 基本数据获取
				this.tableData()
			},
			tableData() {
				// 表格数据
				const data = {
					params: this.getCondition()
				}
				// 请求地址
				let url = this.config.baseApi
				this.apiPost(url, data).then(res => {
					this.handelResponse(res, data => {
						console.log('获取等级列表数据res', res)
						data.integral.map(function(i) {
							i.scopeText = i.scope.split(',')[0] + '-' + i.scope.split(',')[1] + '积分'
						})
						console.log('获取等级列表数据res', res)

						this.data.received.table = data.integral
						this.integration = data.core
						this.data.received.count = data.integral.length
						_g.closeGlobalLoading()
					})
				})
			},
			getCondition() {
				// 搜索优化配置
				let temp = this.data.exchanged.search
				let params = {}
				for(let key in temp) {
					if(temp[key]) {
						params[key] = temp[key]
					}
				}
				return params
			},

			handleAvatarSuccess(res, file) {
				console.log('上传成功返回res', res)
				this.Add.data.form[this.Add.config.form.uploadImg.prop] = res.data[0]
			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!')
				}
				return isLt2M
			},
			commitAdd() {
				this.$refs.form.validate(pass => {
					if(pass) {
						// 提交数据
						this.apiPost(this.Add.baseApi, this.Add.data.form).then(res => {
							console.log('添加等级返回数据res', res)
							this.handelResponse(
								res,
								data => {
									_g.toastMsg('success', res.msg)
										this.Add.dialogFormVisible = false // 显示窗体
								},
								() => {
									this.isLoading = !this.isLoading
								}
							)
						})
					}
				})
			},
			IntegrationSet() {
				let data = {
					scope: this.integration
				}
				this.apiPost('/AdminApi/userList/luckScore', data).then(res => {
							this.handelResponse(
								res,
								data => {
									_g.toastMsg('success', res.msg)
								},
								() => {
									this.isLoading = !this.isLoading
								}
							)
						})
			}
		},
		mixins: [http]
	}
</script>

<style scoped>
	.el-input,
	.el-input__inner {
		width: auto;
	}
</style>